<template>
  <div id="app">
    <div class="left" v-if="isLogin">
      <Article />
    </div>
    <div :class="isLogin ? 'right' : 'fullWidth'">
      <router-view />
    </div>
  </div>
</template>
<script>
// 引入菜单栏
import Article from "comps/article.vue";
export default {
  data() {
    return {
      // 控制菜单栏的显示与隐藏
      isLogin: true,
    };
  },
  created() {
    this.isLogin = this.$store.state.toLogin;
  },
  watch: {
    // 监听其它页面控制菜单栏的状态
    "$store.state.toLogin"(n, o) {
      if (n) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
  },
  components: { Article },
};
</script>
<style>
#app {
  display: flex;
  flex-direction: row;
}
.left {
  width: 30%;
}
.right {
  width: 70%;
  padding: 20px;
}
.fullWidth {
  width: 100%;
  padding: 20px;
}
</style>
